/**
 * Use with cdkListbox
 * Examples:
 * ```html
    <ul class="ngm-radio-select flex space-x-3" cdkListbox >
      @for (type of types(); track type) {
        <li [cdkOption]="type">
          <div class="radio-indicator"></div>
          <div class="text-sm font-normal">{{type}}</div>
        </li>
      }
    </ul>
 * ```
 */
.ngm-radio-select {
  .cdk-option.cdk-option-active {
    @apply shadow-sm border-primary-500 dark:border-primary-600;
    .radio-indicator {
      @apply border-primary-500 dark:border-primary-600;
    }
  }
  .cdk-option {
    @apply border-2 flex items-center h-9 pl-3 rounded-xl cursor-pointer space-x-2
          bg-components-list-option-bg hover:bg-components-list-option-active-bg active:bg-components-list-option-active-bg
          border-neutral-100 dark:border-neutral-600;
    .radio-indicator {
      @apply border-4 border-gray-200 w-4 h-4 rounded-full;
    }
  }
}
